<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关联缴款</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        .el-collapse-item__content {
            padding-bottom: 2px;
        }
    </style>

    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 3px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>

</head>
<body>

    <div id="app">
        <div style="padding: 0 20px;background: white;">
            <el-collapse v-model="activeNames">
                <el-form :inline="true"  :model="formData" :show-message="false" size="small" label-width="115px"  ref="formData" :rules="rules" class="demo-form-inline">
                    <el-collapse-item title="缴款明细" name="1">
                        <div>
                            <el-button  style="margin:3px 0px;" icon="el-icon-plus" type="primary" size="small" @click="selectFangjian" >选择房间</el-button>
                            <el-button  style="margin:3px 0px;" icon="el-icon-minus" type="primary" size="small" @click="deleteJiaofeimingxi(undefined)" >删除</el-button>

                            <el-table
                                    :data="tableData"
                                    height="400px"
                                    size="mini"
                                    @selection-change="handleSelectionChange"
                                    border
                                    style="width: 100%">

                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>

                                <el-table-column
                                        label="操作"
                                        width="90">
                                    <template slot-scope="scope">
                                        <el-button @click="deleteJiaofeimingxi(scope.row.id)" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        prop="rzmc"
                                        label="热站名称"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>

                                <el-table-column
                                        prop="xqmc"
                                        label="小区名称"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>

                                <el-table-column
                                        prop="dlmc"
                                        label="大楼名称"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>
                                <el-table-column
                                        prop="dymc"
                                        label="单元名称"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>
                                <el-table-column
                                        prop="fjmc"
                                        label="房间名称"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>
                                <el-table-column
                                        prop="weij"
                                        label="欠费金额"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>
                                <el-table-column
                                        prop="xm"
                                        label="姓名"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>
                                <el-table-column
                                        prop="ny"
                                        label="年月"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>
                                <el-table-column
                                        prop="fymc"
                                        label="费用名称"
                                        sortable="custom"
                                        :show-overflow-tooltip="true" >
                                </el-table-column>

                            </el-table>

                            <el-row>
                                <span style="display: inline-block;width: 200px;">合计房间数量：{{formData.zsl}}</span> <span>总金额：{{formData.zje}}元</span>
                            </el-row>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="帐单信息" name="2">
                        <div>
                            <el-form-item label="缴款时间："  class="" prop="sj" >
                                <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="formData.sj"  style="width:200px" ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="应收金额："  class="" prop="ysje" >
                                <el-input v-model="formData.ysje" disabled="true"  style="width:200px" ></el-input>
                            </el-form-item>
                            <el-form-item label="票据号："  class="" prop="pjh"  >
                                <el-input v-model="formData.pjh" style="width:200px" ></el-input>
                            </el-form-item>
                            <el-form-item label="本次实交："  class="" prop="skje" >
                                <el-input v-model="formData.skje" disabled="true" style="width:200px" ><template slot="append">元</template></el-input>
                            </el-form-item>
                            <el-form-item label="付款方式："  class="" prop="fkfs" >
                                <el-select v-model="formData.fkfs"  style="width:200px" >
                                    <el-option></el-option>
                                    <el-option v-for="(item,index) in fkfsList" :value="item.code_value" :label="item.code_name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="票据类型："  class="" prop="pjlx" >
                                <el-select v-model="formData.pjlx"  style="width:200px" >
                                    <el-option></el-option>
                                    <el-option v-for="(item,index) in pjlxList" :value="item.code_value" :label="item.code_name"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="收据标题："  class="" prop="sjtitle" >
                                <el-input v-model="formData.sjtitle" disabled="true"   style="width:200px"></el-input>
                            </el-form-item>
                            <el-form-item label="收款备注："  class="" prop="bz" >
                                <el-input v-model="formData.bz"  style="width:550px" ></el-input>
                            </el-form-item>
                        </div>

                    </el-collapse-item>

                </el-form>
            </el-collapse>

            <div style="text-align: center;">
                <el-button  style="margin:3px 0px;" type="primary" size="small" @click="zancun"  >暂存</el-button>
                <el-button  style="margin:3px 0px;" icon="el-icon-s-unfold" type="primary" size="small" @click="jiaokuan"  >开始关联交款</el-button>

            </div>

        </div>

    </div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeNames:["1","2"],
            formData:{zsl:0,zje:"0.00","fkfs":"1","pjlx":"2"},
            rules:{},
            tableData:[],
            multipleSelection: [],
            fkfsList:[],
            pjlxList:[],
        },
        created(){
            this.init();
            this.getDictdataList();
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = [];
                for(let a=0;a<val.length;a++){
                    this.multipleSelection.push(val[a].id);
                }
            },
            //开始缴款
            async jiaokuan(){
                top.load();
                const res = await postWebCustom(getTableId("2031"),this.formData);
                top.layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                top.alert("缴款成功！");
                this.init();
            },
            async getDictdataList(){
                const res = await postWebCustom(getTableId("909"),{code:"付款方式"});
                this.fkfsList = res.data;

                const res1 = await postWebCustom(getTableId("909"),{code:"票据类型"});
                this.pjlxList = res1.data;
            },
            async init(){
                const res = await postWebCustom(getTableId("2027"),{});
                vm.tableData = res.data.list;
                this.formData = res.data.mapm;
                this.formData.zje = res.data.weijsum;
                this.formData.zsl = res.data.fjsum;
                this.formData.ysje = res.data.weijsum;
                this.formData.skje = res.data.weijsum;

                if(this.formData.id == undefined){
                    //获取初始化数据
                    const resq = await postWebCustom(getTableId("699"),{"tableId":getTableId("697"),"yszkid":"-1"});
                    if(resq.code == 0){
                        top.alert(resq.msg);
                        return;
                    }
                    let map0 = Object.values(resq.data)[0];
                    Vue.set(this.formData,"sjtitle",map0.sjtitle);
                    Vue.set(this.formData,"pjh",map0.pjh);
                }


            },
            //暂存数据
            async zancun(){
                top.load();
                const res = await postWebCustom(getTableId("2030"),this.formData);
                top.layer.closeAll();
                top.alert("保存成功！");
            },
            //删除缴费明细
            async deleteJiaofeimingxi(ids){
                if(ids != undefined){
                    const res = await postWebCustom(getTableId("2028"),{ids:""+ids});
                    top.alert(res.msg);
                    this.init();
                }else {
                    const res = await postWebCustom(getTableId("2028"),{ids:""+this.multipleSelection});
                    top.alert(res.msg);
                    this.init();
                }

            },
            selectFangjian(){
                let btn = {btn: ['关闭']
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }};
                top.f_layer_open_get("/admin/html/module/sichuangwuye/shoufei/content_guanlian.html","78%","80%",async function () {
                    vm.init();
                },btn,"选择房间欠费记录",{})
            }
        }
    });
</script>
</html>